webpack5.x 配合babel编译打包发布es5的代码 |
您所在的位置：网站首页 › webpack 启动到沙盒代码 › webpack5.x 配合babel编译打包发布es5的代码 |
webpack5.x 配合babel编译打包发布es5的代码
|
webpack5默认webpack命令，编译打包的代码为箭头函数， 如图：
按照webpack5特性里面的教程，output添加了 ecmaVersion: 5 无效果 output: { ecmaVersion: 5 , path: path.resolve(__dirname,'public'), filename: "bundle.js" },只需要新增 target: ['web', 'es5'], 编译后即为es5代码。 output: { // ecmaVersion: 5, path: path.resolve(__dirname,'public'), filename: "bundle.js", }, mode:'development', target: ['web', 'es5'],//← ← ←就是这个官方API https://webpack.js.org/configuration/target/#browserslist
其他设置和webpack4 + babel7一样，无特别变动。 测试代码贴出来 //package.json文件 "devDependencies": { "@babel/core": "^7.10.5", "@babel/plugin-transform-modules-commonjs": "^7.12.1", "@babel/plugin-transform-runtime": "^7.10.5", "@babel/preset-env": "^7.10.4", "@babel/runtime": "^7.11.2", "@babel/runtime-corejs3": "^7.11.2", "babel-loader": "^8.1.0", "compression-webpack-plugin": "^6.1.1", "core-js": "^3.6.5", "html-webpack-plugin": "^4.5.0", "webpack": "^5.6.0", "webpack-cli": "^4.2.0" } //webpack.config.js文件 let HtmlWebpackPlugin = require('html-webpack-plugin'); let path = require('path'); module.exports = { entry: "./main5.js", output: { path: path.resolve(__dirname,'public'), filename: "bundle.js", // ecmaVersion: 5, }, mode:'development', target: ['web', 'es5'], module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] /*presets: [ ['@babel/preset-env', { targets: { "ie": "10" } }] ],*/ } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html' }), ] } //.babelrc 文件 { "presets": [ ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3 } ],["@babel/plugin-transform-modules-commonjs"] //使commonjs能被处理为前端识别的代码 ] } //main5.js const arr = [ new Promise(() =>{}), new Promise(() =>{}) ] let aaaaaaaaa= 10; arr.map(item =>{ console.log(item); console.log(aaaaaaaaa); }) document.getElementById("btnTest").innerHTML=(aaaaaaaaa); test html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } 测试按钮 //.browserslistrc 文件 > 1% last 10 versions not ie |
【本文地址】
今日新闻 |
推荐新闻 |